<template>
  <div class="app-container">

    <div class="addBox"  v-hasPermi="['system:user:add']">
      <el-button type="primary" icon="el-icon-plus" @click="showAddDialog = true">添加</el-button>
    </div>
    <el-table
      :data="dataList"
      stripe
      style="width: 100%">
      <el-table-column
        label="湿度值"
        align="center"
        width="180">
        <template slot-scope="{row}">
          {{handlerShowData(row,"H").value}}
        </template>
      </el-table-column>
      <el-table-column
        label=" 温度值"
        align="center"
        width="180">
        <template slot-scope="{row}">
          {{handlerShowData(row,"T").value}}
        </template>
      </el-table-column>
      <el-table-column
        label="光照值"
        align="center"
        width="180">
        <template slot-scope="{row}">
          {{handlerShowData(row,"L").value}}
        </template>
      </el-table-column>
      <el-table-column
        label="二氧化碳浓度值"
        align="center"
        width="180">
        <template slot-scope="{row}">
          {{handlerShowData(row,"Co2").value}}
        </template>
      </el-table-column>
      <el-table-column
        label="土壤湿度值"
        align="center"
        width="180">
        <template slot-scope="{row}">
          {{handlerShowData(row,"Soil").value}}
        </template>
      </el-table-column>
      <el-table-column
        label="温度阈值"
        align="center"
        width="180">
        <template slot-scope="{row}">
          {{handlerShowData(row,"T_T").value}}
        </template>
      </el-table-column>
      <el-table-column
        label="二氧化碳浓度阈值"
        align="center"
        width="180">
        <template slot-scope="{row}">
          {{handlerShowData(row,"C_C").value}}
        </template>
      </el-table-column>
      <el-table-column
        label="土壤湿度阈值"
        align="center"
        width="180">
        <template slot-scope="{row}">
          {{handlerShowData(row,"S_S").value}}
        </template>
      </el-table-column>
      <el-table-column
        label="采集时间"
        align="center"
        width="180">
        <template slot-scope="{row}">
          {{row[0].createTime}}
        </template>
      </el-table-column>
      <el-table-column
        label="设备状态"
        align="center"
        width="180">
        <template slot-scope="{row}">
          <div class="success state" v-if="handlerState(row) === true">正常</div>
          <div class="error state" v-else>异常</div>
        </template>
      </el-table-column>
      <el-table-column
        label="异常时间"
        align="center"
        width="180">
        <template slot-scope="{row}">
          <div  v-if="handlerState(row) !== true">{{handlerState(row)}}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="180">
        <template slot-scope="{row}">
          <el-button type="danger" v-hasPermi="['system:user:delete']" @click="doDelete(row)">删除</el-button>
          <el-button type="primary" @click="doEdit(row)" v-hasPermi="['system:user:edit']">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="agination">
      <pagination
        v-show="queryParams.total>0"
        :total="queryParams.total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.pageSize"
        @pagination="getData"
      />
    </div>
    <edit  v-if="showDialog" :row="selectRow" @close="closeDialog"/>
    <add v-if="showAddDialog" @close="closeDialog"/>
  </div>
</template>

<script>
import {getHistory, deleteRecords} from "@/api/IOT/index"
import Edit from "./components/Edit/index.vue"
import Add from "./components/Add/index.vue"
import refer from "./refer"
export default {
  name: "index",
  components:{
    Edit,
    Add
  },
  data() {
    return {
      showDialog:false,
      showAddDialog:false,
      dialogType:0,
      selectRow:[],

      queryParams: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      dataList: [],
      // 数据参照对象
      refer:refer
    }
  },
  created() {
    this.getData()
  },
  methods: {

    doDelete(row){
      const ids = row.map(item=>item.id).filter(item=>item!=null)
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRecords({
          ids
        }).then(res=>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getData()
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handlerShowData(row,properties){
      const index = row.findIndex(item=>item.properties == properties)
      const item = row[index]
      if(!item.value){
        item.value = "数据异常"
      }
      return row[index]
    },
    handlerState(row){
      for (let i = 0; i < row.length; i++) {
        if(row[i].value == "数据异常")
          return row[i-1].createTime
      }
      return true
    },
    getData() {
      getHistory(this.queryParams).then(res => {
        this.queryParams.total = res.data.total
        const refer = this.refer
        this.dataList = res.data.list.map(item => {
          for (let i = 0; i < refer.length; i++) {
            const {properties, name} = refer[i]
            const index = item.findIndex(item2 => item2.properties == properties)
            if (index != -1) {
              item[index].name = name
            } else {
              item[i] = {
                createTime: null,
                id: null,
                name : name,
                mqttUser: null,
                properties: properties,
                rn: null,
                updateTime: null,
                value: null,
              }
            }
          }
          return item
        })
      })
    },
    doEdit(row){
      console.log(row)
      this.dialogType = 1
      this.showDialog =  true
      this.selectRow = row
    },
    closeDialog(){
      this.dialogType = 0
      this.showDialog =  false
      this.showAddDialog =  false
      this.selectRow = []
      this.getData()
    }
  }
}
</script>

<style scoped>
.addBox {
  margin: 20px 10px;
}
.state {
  position: relative;
  &:before{
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50px;
    transform: translateY(-50%);
  }
}
.success {
  &:before{
    background-color: green;
  }
}
</style>
